
let strList=[]
let domList={
    ul: document.getElementById('musicList'),
    video: document.getElementById('musicvideo'),
    liElements : document.getElementsByTagName('li'),
    musicListStr:document.getElementById('musicListStr')
}
let currentTimeIndex=0
/**
 *  格式化歌词
 */

function initStr(){
    const line = str.split("\n")
    line.forEach((e) =>{
        // 通过]再分  达到 time，text
        const row  =  e.split(']')
        const time=computeTime(row[0].substring(1))
        const text = row[1]
        strList.push({time,text})
    })
}
/**
 *计算歌词出现的时间。S
 */
function computeTime(str){
 return (+str.split(":")[0])*60+ (+str.split(":")[1])
}
/**
 * 根据歌词数据创建li
 */
function ceratDomli(){
   
    for (const item of strList) {
      const li = document.createElement("li");
      li.textContent = item.text;
      domList.ul.appendChild(li);
    }
    
    // document.body.appendChild(ul); 
}

/**
 *   获取video组件播放时间
 */
domList.video.addEventListener('timeupdate', (event) => {
  const index =  getIndex(domList.video.currentTime)
  getScrollTop(index)
  });

  /**
   * 根据时间计算对应歌词的下标
   */
  function getIndex(time){
    let index=0
    for (let i = 0; i < strList.length-1; i++) {
      if(strList[i].time >= time){
        index=i-1
        break
      } else{
        index=strList.length-1
      }
    }
    currentTimeIndex=index
    return index
  }

  /**
   * 计算滚动距离
   */
  function getScrollTop(index){
 const musicListStrHeighe=domList.musicListStr.getBoundingClientRect().height /2
 const musicListIndex=domList.liElements[0].getBoundingClientRect().height *(index+1)+domList.liElements[0].getBoundingClientRect().height/2
let scrollTop=musicListIndex-musicListStrHeighe<=0?0:musicListIndex-musicListStrHeighe
//  domList.ul.children.  [currentTimeIndex-1].classList.remove('stractive')
domList.ul.style.transform = `translateY(-${scrollTop}px)`;
// 去掉之前样式
var li =document.querySelector('.stractive')
console.log(li,'lilili')
if(li){
    li.classList.remove('stractive')
}

 domList.ul.children[index].classList.add('stractive')


  }
initStr()
ceratDomli()